<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:49:12
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:33:02
 * @FilePath: /tea-garden-web/src/pages/overview/subject-disease.vue
 * @Description: 专题-病虫害管理
-->
<template>
  <div class="subject-disease">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <span class="module-name">病虫害管理</span>
      <div class="subject-content">
        <div class="contentTit">
          {{ diseaseData.results }}
        </div>
        <div class="contentTime">{{ diseaseData.time }}</div>
        <div v-show="diseaseData.suggest !== ''" class="contentText">{{ diseaseData.suggest }}</div>
          <div class="imgBox">
        <img v-show="imageSrc !== ''" class="contentImg" :src="imageSrc"/></div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/util/http.js'
export default {
  data () {
    return {
      diseaseData: {},
      imageMapping: {
        1: require('@/assets/picture/茶饼病.jpg'),
        2: require('@/assets/picture/茶芽枯病.jpg'),
        3: require('@/assets/picture/茶云纹叶枯病.jpg'),
        4: require('@/assets/picture/茶炭疽病.jpg'),
        5: require('@/assets/picture/茶尺蠖幼虫.jpg'),
        6: require('@/assets/picture/茶蚜虫.jpg'),
        7: require('@/assets/picture/黑刺粉虱.jpg')
      }
    }
  },

  computed: {
    imageSrc () {
      return this.diseaseData.picture ? this.imageMapping[+this.diseaseData.picture] : ''
    }
  },
  methods: {
    // 获取列表信息
    async getList () {
      const { data } = await get({ url: '/pestforecast/list' })
      this.diseaseData = data[0]
      console.log(this.diseaseData)
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-disease {
  width: 308px;
  height: 780px;
  margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .contentTit {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #000000;
      font-style: normal;
      text-transform: none;
    }
    .contentTime {
      font-size: 14px;
      margin-top: 20px;
      text-align: right;
      color: #999999;
    }
    .contentText {
      max-height: 320px;
      overflow-y: auto;
      background: #ffffff;
      margin-top: 20px;
      padding:16px;
      box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.08);
      border-radius: 8px 8px 8px 8px;
    }
    .imgBox {
      width: 270px;
      height: 200px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
